<!-- 组件 A：发送事件 -->
<template>
  <button @click="sendEvent">向组件 B 发送消息</button>
</template>

<script setup>
import eventBus from '@/utils/eventBus.js';
const sendEvent = () => {
  eventBus.emit('customEvent', '这是组件 A 传递的消息');
};
</script>

<!-- 组件 B：监听事件 -->
<template>
  <p>组件 A 传递的消息：{{ msg }}</p>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import eventBus from '@/utils/eventBus.js';
const msg = ref('');

onMounted(() => {
  // 挂载时监听事件
  eventBus.on('customEvent', (data) => {
    msg.value = data;
  });
});

onUnmounted(() => {
  // 卸载时取消监听（避免内存泄漏）
  eventBus.off('customEvent');
});
</script>